<template>
  <div class="forum">
    <div class="nav">
      <p class="pp">宠物论坛</p>
      <p class="ppp"
         @click="myforum()">我的发布</p>
    </div>
    <div class="fabiao">
      <div class="biaoti">
        <span>标题：</span>
        <el-input v-model="title"
                  style="width: 500px"
                  placeholder="请输入标题"
                  clearable />
      </div>
      <div class="neirong">
        <span>内容：</span>
        <el-input v-model="content"
                  style="width: 500px"
                  type="textarea"
                  :autosize="{ minRows: 3 }"
                  placeholder="请输入内容" />
      </div>
      <div class="fabu"
           @click="fabu()">一键发布</div>
    </div>
    <!-- 循环列表 -->
    <div class="nrong"
         v-for="(item,index) in forums"
         :key="index"
         @click="xiang(item.forum_id)">
      <div class="title">
        {{ item.title }}
      </div>
      <div class="zuozhe">
        <div class="img">
          <img :src="item.head_img"
               alt="">
          <div class="name">
            {{ item.username }}
          </div>
        </div>
        <div class="time">
          发布时间：
          {{ item.publish_time }}
        </div>
      </div>
      <div class="content">
        <span>
          {{ item.content }}
        </span>
      </div>
    </div>
    <el-dialog v-model="centerDialogVisible"
               width="500"
               title="是否确定发表该文章？"
               center
               :align-center='true'>
      <span>

      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary"
                     @click="queding()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>



<script>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from '@/axios'
import { ElLoading, ElMessage } from 'element-plus'
export default {
  components: {},
  setup() {
    const router = useRouter()
    //标题
    let title = ref('')
    // 内容
    let content = ref('')
    // 论坛列表
    let forums = ref([])
    // 弹窗
    let centerDialogVisible = ref(false)
    let myforum = () => {
      router.push('/forum/myforum')
    }
    // 跳转详情页
    let xiang = (id) => {
      localStorage.setItem('forum_id', id)
      router.push('/forum/details')
    }
    // 发布按钮
    let fabu = () => {
      if (title.value == '') {
        ElMessage({
          message: '请输入您的标题',
          type: 'error'
        })
      } else if (content.value == '') {
        ElMessage({
          message: '请输入您的内容',
          type: 'error'
        })
      } else {
        centerDialogVisible.value = true
      }
    }
    // 弹窗确定按钮
    let queding = () => {
      axios
        .post('/luntan', {
          username: localStorage.getItem('username'),
          title: title.value,
          content: content.value
        })
        .then(() => {
          centerDialogVisible.value = false
          // console.log(d)
          const loading = ElLoading.service({
            lock: true,
            text: '文章发表中...',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          setTimeout(() => {
            loading.close()
            ElMessage({
              message: '文章发表成功',
              type: 'success'
            })
            //获取论坛列表
            axios
              .get('/forums')
              .then((d) => {
                //过滤数据
                // console.log(d)
                forums.value = d
              })
              .catch((err) => console.log(err))
            title.value = ''
            content.value = ''
          }, 2000)
        })
        .catch((err) => console.log(err))
    }
    onMounted(() => {
      //获取论坛列表
      axios
        .get('/forums')
        .then((d) => {
          //过滤数据
          // console.log(d)
          forums.value = d
        })
        .catch((err) => console.log(err))
    })

    return {
      title,
      content,
      centerDialogVisible,
      queding,
      fabu,
      forums,
      myforum,
      xiang
    }
  }
}
</script>

<style scoped lang="less">
.forum {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding-bottom: 50px;
  .nav {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: 600;
    color: #eaa40d;
    border-bottom: 1px solid #000;
    .pp {
      width: 650px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      border-radius: 15px;
      background-color: #fcfcfa;
      border-bottom: #cdbf62 2px solid;
      border-left: #cdbf62 2px dashed;
      border-right: #cdbf62 2px dashed;
      border-top: #cdbf62 2px solid;
    }
    .ppp {
      width: 150px;
      height: 40px;
      font-size: 20px;
      text-align: center;
      line-height: 40px;
      margin: 40px 0 0 40px;
      border-radius: 15px;
      background-color: #fcfcfa;
      border-bottom: #cdbf62 2px solid;
      border-left: #cdbf62 2px dashed;
      border-right: #cdbf62 2px dashed;
      border-top: #cdbf62 2px solid;
      cursor: pointer;
    }
  }
  .fabiao {
    margin: 20px auto 0;
    width: 100%;
    padding: 30px 20px;
    background-color: #fcfcfa;
    border-bottom: #cdbf62 2px solid;
    border-left: #cdbf62 2px dashed;
    border-right: #cdbf62 2px dashed;
    border-top: #cdbf62 2px solid;
    .biaoti {
      width: 700px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      span {
        margin-right: 20px;
      }
    }
    .neirong {
      display: flex;
      align-items: flex-start;
      width: 700px;
      margin: 30px auto 0;
      span {
        margin: 5px 20px 0 0;
      }
    }
    .fabu {
      width: 200px;
      height: 40px;
      font-size: 24px;
      font-weight: 600;
      text-align: center;
      line-height: 40px;
      border-radius: 15px;
      background-color: #eeecde;
      border-bottom: #cdbf62 2px solid;
      border-left: #cdbf62 2px solid;
      border-right: #cdbf62 2px dashed;
      border-top: #cdbf62 2px dashed;
      margin: 10px auto 0;
      cursor: pointer;
    }
  }
  .nrong {
    width: 1000px;
    margin: 0 auto;
    margin-top: 20px;
    border: #cdbf62 2px solid;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    .title {
      width: 100%;
      height: 50px;
      padding: 0 20px;
      line-height: 50px;
      font-size: 20px;
      font-weight: 600;
      color: #000;
      width: 980px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .zuozhe {
      width: 100%;
      height: 45px;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: #cdbf62 2px dashed;
      .img {
        width: 500px;
        height: 45px;
        display: flex;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 10px;
        }
        .name {
          font-size: 18px;
          color: #666;
        }
      }
    }
    .content {
      width: 100%;
      font-size: 16px;
      background-color: #fcfcfa;
      padding: 20px;
      span {
        text-indent: 2em;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; /* 限制显示的行数 */
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>

